<template>
	<div>
		<!-- 这是轮播图 -->
		<mt-swipe :auto="4000">
		 	<!-- 在组件中使用v-for循环时，一定要使用:key -->
		 	<!-- 将来，谁使用此轮播图组件，谁为我们传数据lunbotuList -->
		 	<!-- 父组件向子组件传数据 -->
			 <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
			 	<img :src="item.img" :class="{'full':isfull}">
			 </mt-swipe-item>
		</mt-swipe>
	</div>

	<!-- 分析：为什么商品评论的轮播图那么丑 -->
	<!-- 1.首页的图片宽度设为100%
	2.在商品详情页面中，轮播图宽高100%不好看
	3.商品闲情页面高度100%，宽度自适应
	4.进过分析：首页中的轮播图和详情中的轮播图，分歧点是宽度到底是100%还是自适应 
	5.这俩个轮播图其他方面都是没冲突，只是宽度有问题，可以定义一个属性，让使用轮播图的调用者设置-->
</template>
<script type="text/javascript">
	export default{
		props:["lunbotuList","isfull"]
	}
</script>

<style lang="scss" scoped>
	.mint-swipe{
		height:200px;

		.mint-swipe-item{
			text-align: center;
			
			img{
				/*width: 100%;*/
				height: 100%;
			}

		}
				
	}
	.full{
		width: 100%;
	}
</style>